<template>
  <div>
    <div class="card-header">
      <span>{{title}}</span>
      <svg
        t="1649853984656"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2518"
        width="20"
        height="20"
      >
        <path
          d="M512 85.333333C276.48 85.333333 85.333333 276.48 85.333333 512S276.48 938.666667 512 938.666667 938.666667 747.52 938.666667 512 747.52 85.333333 512 85.333333z m0 796.444445c-203.662222 0-369.777778-166.115556-369.777778-369.777778S308.337778 142.222222 512 142.222222 881.777778 308.337778 881.777778 512 715.662222 881.777778 512 881.777778z"
          p-id="2519"
          fill="#8a8a8a"
        />
        <path
          d="M549.546667 641.706667l-29.582223 15.928889c2.275556-12.515556 14.791111-62.577778 35.271112-152.462223 2.275556-9.102222 4.551111-36.408889-15.928889-47.786666-6.826667-3.413333-14.791111-3.413333-22.755556 0-9.102222 3.413333-17.066667 7.964444-23.893333 12.515555-4.551111 3.413333-25.031111 18.204444-60.302222 44.373334-6.826667 5.688889-9.102222 14.791111-4.551112 22.755555s13.653333 10.24 20.48 5.688889l34.133334-20.48-35.271111 150.186667c-3.413333 13.653333 1.137778 22.755556 7.964444 30.72 5.688889 6.826667 14.791111 11.377778 23.893333 11.377777 4.551111 0 7.964444-1.137778 11.377778-2.275555 6.826667-3.413333 31.857778-17.066667 76.231111-43.235556 7.964444-4.551111 11.377778-14.791111 5.688889-22.755555-3.413333-5.688889-13.653333-9.102222-22.755555-4.551111z"
          p-id="2520"
          fill="#8a8a8a"
        />
        <path
          d="M523.377778 364.088889m-45.511111 0a45.511111 45.511111 0 1 0 91.022222 0 45.511111 45.511111 0 1 0-91.022222 0Z"
          p-id="2521"
          fill="#8a8a8a"
        />
      </svg>
    </div>
    <div class="cart-content">{{count}}</div>
    <div class="card-chart">
      <slot name="charts"></slot>
    </div>
    <div class="cart-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Detail',
  props: ['title', 'count'],
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  color: rgb(191, 191, 191);
}
.cart-content {
  font-size: 30px;
  padding: 10px 0;
}
.card-chart {
  height: 50px;
  line-height: 50px;
}
.cart-footer {
  border-top: 1px solid #eee;
  padding-top: 10px ;
}
</style>>
